<template>
  <div
    class="w-316px h-118px relative"
    @mouseenter="() => (showDel = true)"
    @mouseleave="() => (showDel = false)"
  >
    <div class="absolute z-1 left-0 top-0"><img :src="CouponListIcon" alt="" /></div>
    <div class="w-full h-full absolute left-0 top-0 z-2 flex">
      <div class="w-100px h-100px mt-9px ml-7px" style="flex-shrink: 0">
        <img :src="data.url" class="w-full h-full" alt="" />
      </div>
      <div class="flex flex-col color-coupon ml-10px">
        <div class="flex">
          <div v-if="!props.data?.money?.split('_')[0]?.startsWith('$')" class="mt-13px text-12px">
            {{ props.data?.money?.split('_')[0] }}
          </div>
          <div class="text-34px font-bold h-34px leading-51px">
            {{ props.data?.money?.split('_')[1] }}
          </div>
          <div v-if="props.data?.money?.split('_')[0]?.startsWith('$')" class="mt-13px text-10px">
            {{ props.data?.money?.split('_')[0]?.replace('$', '') }}
          </div>
          <div
            class="px-4px py-4px text-10px tracking-wider flex items-center mt-20px ml-10px"
            style="background: rgba(234, 81, 72, 0.2)"
          >
            {{ props.data?.condition }}
          </div>
        </div>
        <div class="w-140px mt-15px">
          <!-- <div class="28px text-12px px-4px py-2px rounded-2px" style="border: 1px solid #ea5148">
            可叠加
          </div>
          <div
            class="text-14px font-bold tracking-wider ml-4px w-100px"
            style="color: #333; flex-shrink: 0"
          >
            所有饮品可用可是大法官就开始阿拉山口大家来看阿斯利康的
          </div> -->
          <span
            v-if="props.data?.isAccumulate"
            class="text-12px px-4px py-2px rounded-2px"
            style="border: 1px solid #ea5148"
            >可叠加</span
          ><span class="ml-4px text-12px font-bold color-word">{{
            props.data?.spu_type_description
          }}</span>
        </div>
        <slot name="timeout"></slot>
      </div>
    </div>
    <div
      v-if="
        props.action === '立即领取' || (props.data.include_spu && props.data.include_spu !== 'null')
      "
      class="absolute right-20px top-20px text-16px font-medium text-white z-2 tracking-widest cursor-pointer flex items-center flex-col"
      @click="onReceive"
    >
      <div v-for="w in props.action" :key="w" class="mt-4px">
        {{ w }}
      </div>
      <!-- <Transition name="fade">
        <div
          v-if="showDel && props.action === '立即使用'"
          class="absolute -right-30px -top-30px z-4 cursor-pointer w-24px h-24px"
          @click="del"
        >
          <img :src="CloseIcon" alt="" />
        </div>
      </Transition> -->
    </div>
    <div
      v-else
      class="absolute right-20px top-20px text-16px font-medium text-white z-2 tracking-widest flex items-center flex-col cursor-pointer"
      @click="scanCode"
    >
      <div v-for="w in '结账使用'" :key="w" class="mt-4px">
        {{ w }}
      </div>
    </div>
    <div
      v-if="props.status"
      class="absolute left-0 top-0 w-full h-full z-3"
      style="background: rgba(101, 101, 101, 0.6)"
    >
      <div class="absolute left-223px top-58px"><img :src="GetCouponIcon" alt="" /></div>
    </div>
    <n-modal :show="showModal" style="width: 40%">
      <n-card title="使用详情">
        <n-descriptions :columns="1" label-placement="left">
          <n-descriptions-item label="使用场景">前台结账时使用</n-descriptions-item>
          <n-descriptions-item label="使用方式"
            >前台结账出示优惠券码，工作人员核对</n-descriptions-item
          >
          <n-descriptions-item label="券码入口">
            <img :src="MiniProgramCode" class="w-120px h-120px" alt="" />
          </n-descriptions-item>
        </n-descriptions>
        <div class="flex justify-end">
          <n-button size="large" type="primary" @click="() => (showModal = false)">确定</n-button>
        </div>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import CouponListIcon from '@renderer/assets/couponList.svg'
import { useUserStore } from '@renderer/store/modules/user'
import GetCouponIcon from '@renderer/assets/getCoupon.svg'
import { NModal, NCard, NDescriptions, NDescriptionsItem } from 'naive-ui'
import MiniProgramCode from '@renderer/assets/小程序二维码.jpeg'
// import CloseIcon from '@renderer/assets/closeLogin.svg'
import _ from 'lodash'
import { ref } from 'vue'
const user = useUserStore()
const emits = defineEmits(['on-receive', 'on-del'])
const showDel = ref<boolean>(false)
const showModal = ref<boolean>(false)
const props = defineProps({
  status: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  },
  action: {
    type: String,
    default: () => '立即领取'
  }
})
const onReceive = () => {
  if (!user.GetToken) {
    return user.invokeLogin(true, () => {
      emits('on-receive')
    })
  }
  emits('on-receive')
}

const scanCode = () => {
  showModal.value = true
}
// const del = _.throttle(() => {
//   emits('on-del', props.data)
// }, 2000)
</script>

<style scoped></style>
